<template>
	<view class="content">
		<uni-nav-bar leftIcon="back" rightText="全选" title="手机联系人" @clickLeft="$back()" @clickRight="$back()" backgroundColor="#f3f3f3"></uni-nav-bar>
		<view class="center f30 shareFriend flex-start">
			<image src="../../static/contact/share.png" mode="aspectFill"></image>
			分享 专聊…
		</view>
		<dlContacts ref="jContacts" :myList="myList" @confirm="contactsConfirm"></dlContacts>
		<view class="alert-wrapper center" :style="{ left: alertTop }">
			<view class="alert-inner center colum">
				<view class="f34">创建群组</view>
				<view class="input_box">
					<input type="text" placeholder="请输入群组名" />
					<input type="text" placeholder="请输入群组描述" />
				</view>
				<view class="btn center cfff f30">确定</view>
			</view>
		</view>
	</view>
</template>
<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
import dlContacts from '@/components/dl-contacts/dl-contacts.vue';
export default {
	components: {
		dlContacts,uniNavBar
	},
	data() {
		return {
			userList:[],
			alertTop:'100%',
			myList: [
				{
					id: 1,
					name: 'z朱海'
				},
				{
					id: 3,
					name: ' '
				},
				{
					id: 4,
					name: '林二'
				},
				{
					id: 7,
					name: '  程紫衣'
				},
				{
					id: 9,
					name: '翁富翁'
				},
				{
					id: 10,
					name: '我'
				},
				{
					id: 11,
					name: '石更硬'
				},
				{
					id: 12,
					name: '..私教'
				},
				{
					id: 13,
					name: '!)陈靖南'
				},
				{
					id: 14,
					name: '翁啊啊啊啊'
				}
			]
		};
	},
	onReady() {
		this.$refs.jContacts.show();
	},
	methods: {
		share(){
			uni.shareWithSystem({
			  summary: '',
			  href: 'https://uniapp.dcloud.io',
			  success(){
			    // 分享完成，请注意此时不一定是成功分享
			  },
			  fail(){
			    // 分享失败
			  }
			})
		},
		contactsConfirm(res) {
			this.userList=res
			this.changealert()
		},
		changealert() {
			this.alertTop==0?this.alertTop='100%':this.alertTop=0
		}
	}
};
</script>
<style lang="scss">
.shareFriend {
	height: 104rpx;
	background: #ffffff;
	image {
		width: 38rpx;
		height: 32rpx;
		margin: 0 20rpx 0 30rpx;
	}
}
.alert-inner {
	width: 674rpx;
	height: 431rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 12rpx;
	margin-top: 120rpx;
	.btn {
		width: 630rpx;
		height: 80rpx;
		background: rgba(2, 151, 254, 1);
		border-radius: 4rpx;
		margin-top: 20rpx;
	}
	.input_box {
		width: 630rpx;
		height: 202rpx;
		background: rgba(242, 243, 245, 1);
		border-radius: 8rpx;
		input {
			height: 83rpx;
			line-height: 83rpx;
			margin: 0 20rpx;
			border-bottom: 1rpx solid #e0e0e0;
		}
	}
	.f34 {
		margin: 30rpx auto 37rpx;
	}
}
</style>
